<div class="machines">


	<div class="information">
		<div class="actions" ng-if="hasAnyRole('ASSET_UPLOAD', 'ACCOUNTING_VIEW', 'AUDIT_VIEW', 'USER_VIEW')">
			<a href="/#/machines/add" class="btn btn-primary" translate="machine.add"></a>
		</div>
	</div>
	<h1 translate="machine.title"></h1>

	<div class="text-center" style="margin-bottom:20px;">
		<div class="btn-group" role="group" aria-label="...">
			<button ng-repeat="type in machineTypes"
					type="button" class="btn btn-default"
					ng-click="toggleMachineType(type)"
					ng-class="{'active':isMachineTypeSelected(type)}">{{type.name}}
			</button>
		</div>
	</div>


	<div class="masonry-grid" grid-width="400">
		<div ng-repeat="machine in machines" class="masonry-grid-item">
			<a class="masonry-card"
			   href="/#/machines/{{machine.id}}">
				<span class="title">{{machine.name}}</span>
				<span class="introduction">{{machine.introduction}}</span>
				<img ng-image="machine.image_url" style="max-width: 100%"/>
			</a>
		</div>
	</div>
</div>